<template>
  <div
    class="applicationcode"
    @click="goback"
  >
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    /> -->
    <div class="wrapper">
      <div class="chart-head">{{ chartTitle }}</div>
      <div
        ref="chartLine2"
        class="cardEcharts"
      />
    </div>

  </div>

</template>

<script>
import $api from '@/api/index'
import { mapGetters } from 'vuex'
import Vue from 'vue'

import Toast from 'vant'
Vue.use(Toast)
export default {
  data() {
    return {
      DetailData: [],
      chartTitle: this.$route.query.name

    }
  },
  beforeCreate() {
    this.$dd.showTitleBar()
  },
  mounted() {
    // this.$dd.rotateView({
    //   showStatusBar: true, // 否显示statusbar
    //   clockwise: true, // 是否顺时针方向
    //   onSuccess: function(result) {
    //   }
    // })
    this.$dd.setTitle({
      title: '数据统计'
    }).then(res => {
      console.log(res)
    }).catch(err => { console.log(err) })
    this.queryQuarantineDetail()
  },
  computed: {
    ...mapGetters([
      'reportId'
    ])
  },
  methods: {

    queryQuarantineDetail() {
      $api.user.queryQuarantineDetail({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.DetailData = res.data
        this.drawLine2(this.DetailData)
      })
    },
    drawLine2(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine2)

      console.log(val)
      const arr = [{ value: val.quarantineEnd, name: '解除隔离人员占比' }, { value: val.quarantineRuning, name: '隔离人员占比' }]
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '隔离人员统计占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16 // 文字的字体大小
                },
                formatter: '{d}%'

              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20px',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: arr
          }
        ]
      }
      myChart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
.applicationcode{
    width:100%;
    height:100%;
    background-color: #F7FBFF;
    padding: 28px;
    box-sizing: border-box;

}
.wrapper{
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 6px 12px 2px rgba(39,138,210,0.15);
    height: 100%;
    .chart-head{
      height: 92px;
      padding: 24px;
      text-align:center;
      font-size: 32px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #4989F2;
      box-sizing: border-box;
      box-shadow: 0px 12px 12px 2px rgba(101,159,255,0.12);
    }
  .cardEcharts{
      // width:calc(100% + 400px);
      width:100%;
      height:calc(100% - 126px);
    }
}
</style>
